<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>逗游吧后台框架</title>
    <% include ../include/docs-link %>
</head>
<body class="wrapper-body">
<% include ../include/docs-header %>
<div class="wrapper-container">
    <div class="container-fluid">
        <div class="row no-gutter">
            <div class="col-2">
                <% include ../include/docs-nav %>
            </div>
            <div class="col-10">
                <div class="wrapper-content">
                    <article class="wrapper-article">
                        <h1>Toastr 提示框</h1>
                        <div class="anchor">
                            <h2 id="概述">概述</h2>
                            <a href="#概述">#</a>
                        </div>
                        <div>
                            <p>在界面右上角显示可关闭的全局通知，常用于以下场景：</p>
                            <ul style="list-style: circle; padding-left: 40px;">
                                <li>通知内容带有描述信息</li>
                                <li>系统主动推送</li>
                            </ul>
                        </div>
                        <div class="anchor">
                            <h2 id="基础用法">基础用法</h2>
                            <a href="#基础用法">#</a>
                        </div>
                        <div class="example">
                            <div class="example-case">
                                <button type="button" class="btn btn-primary" dy8-unit="toastr" data-title="提示标题" data-content="这是一条成功的提示消息">打开提示</button>
                                <button type="button" class="btn btn-primary" dy8-unit="toastr" data-content="这是一条成功的提示消息">打开提示(仅内容)</button>
                            </div>
                            <div class="example-code">
    <pre><code class="html">
    &lt;button type="button" class="btn btn-primary" dy8-unit="toastr" data-title="提示标题" data-content="这是一条成功的提示消息"&gt;打开提示&lt;/button&gt;
    &lt;button type="button" class="btn btn-primary" dy8-unit="toastr" data-content="这是一条成功的提示消息"&gt;打开提示(仅内容)&lt;/button&gt;
    </code></pre>
                            </div>
                            <div class="example-code-more">
                                <i class="glyphicon glyphicon-triangle-bottom"></i>
                                <span>Show Code</span>
                            </div>
                        </div>
                        <div class="anchor">
                            <h2 id="带有倾向性">带有倾向性</h2>
                            <a href="#带有倾向性">#</a>
                        </div>
                        <div class="example">
                            <div class="example-case">
                                <button type="button" class="btn btn-success" dy8-unit="toastr" data-status="success" data-title="成功消息" data-content="这是一条成功的提示消息">成功</button>
                                <button type="button" class="btn btn-warning" dy8-unit="toastr" data-status="warning" data-title="警告消息" data-content="这是一条警告的提示消息">警告</button>
                                <button type="button" class="btn btn-info" dy8-unit="toastr" data-status="info" data-title="信息消息" data-content="这是一条消息的提示消息">信息</button>
                                <button type="button" class="btn btn-danger" dy8-unit="toastr" data-status="error" data-title="错误消息" data-content="这是一条错误的提示消息">错误</button>
                            </div>
                            <div class="example-code">
    <pre><code class="html">
    &lt;button type="button" class="btn btn-success" dy8-unit="toastr" data-status="success" data-title="成功消息" data-content="这是一条成功的提示消息"&gt;成功&lt;/button&gt;
    &lt;button type="button" class="btn btn-warning" dy8-unit="toastr" data-status="warning" data-title="警告消息" data-content="这是一条警告的提示消息"&gt;警告&lt;/button&gt;
    &lt;button type="button" class="btn btn-info" dy8-unit="toastr" data-status="info" data-title="信息消息" data-content="这是一条消息的提示消息"&gt;信息&lt;/button&gt;
    &lt;button type="button" class="btn btn-danger" dy8-unit="toastr" data-status="error" data-title="错误消息" data-content="这是一条错误的提示消息"&gt;错误&lt;/button&gt;
    </code></pre>
                            </div>
                            <div class="example-code-more">
                                <i class="glyphicon glyphicon-triangle-bottom"></i>
                                <span>Show Code</span>
                            </div>
                        </div>
                        <div class="example">
                            <div class="example-case">
                                <table class="table table-hover table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th width="20%">参数</th>
                                            <th width="20%">默认值</th>
                                            <th>说明</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <th>data-title</th>
                                            <td>null</td>
                                            <td>标题</td>
                                        </tr>
                                        <tr>
                                            <th>data-content</th>
                                            <td>null</td>
                                            <td>内容</td>
                                        </tr>
                                        <tr>
                                            <th>data-event</th>
                                            <td>'click'</td>
                                            <td>事件类型</td>
                                        </tr>
                                        <tr>
                                            <th>data-status</th>
                                            <td>'info'</td>
                                            <td>提示状态类型</td>
                                        </tr>
                                        <tr>
                                            <th>data-time-out</th>
                                            <td>'5000'</td>
                                            <td>通过适当设置时间来控制如何与用户交互。可以通过将超时时间设置为0来禁用延时关闭功能。</td>
                                        </tr>
                                        <tr>
                                            <th>data-progress-bar</th>
                                            <td>false</td>
                                            <td>显示进度条来判断到期时间</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </article>
                </div>
            </div>
        </div>
    </div>
</div>
<% include ../include/docs-footer %>
</body>
</html>